<template>
	<el-row class="logBox">
		<el-col :span="23">
			<div style="width: 100%;display: flex;flex-direction: row;align-items: center;">
				<div class="selectBox">
					<div>IP：</div>
					<el-select v-model="getCid" filterable placeholder="请选择" clearable>
						<el-option v-for="item in options" :key="item.cid" :label="item.label" :value="item.label">
						</el-option>
					</el-select>
				</div>
				<!-- <div class="selectBox">
					<div>系统名称：</div>
					<el-select v-model="systemname" filterable placeholder="请选择" clearable>
						<el-option v-for="item in options" :key="item.systemname" :label="item.systemname" :value="item.systemname">
						</el-option>
					</el-select>
				</div> -->
				<div style="margin-left: 20px;">
					<el-button type="primary" icon="el-icon-search" @click="getDataAll">搜索</el-button>
					<!-- <el-button type="warning" icon="el-icon-refresh" @click="reset">重置</el-button> -->
				</div>
				<div class="toolBox">
					<div>
						<template>
							<el-tooltip content="筛选列" placement="top" effect="dark">
								<el-popover placement="left-start" width="200" trigger="click">
									<el-checkbox-group id="myCheckboxGroup" v-model="checkedArr" @change="handleChange">
										<el-checkbox v-for="item in tableColumns" :label="item.label"
											style="display:block;">
											{{item.label}}
										</el-checkbox>
									</el-checkbox-group>
									<el-button icon="el-icon-jk-lie" slot="reference">
									</el-button>
								</el-popover>
							</el-tooltip>
						</template>
					</div>
					<div style="float: right; margin: 0 10px 0 10px;">
						<vJsonExcel :data="jsonData" :name="'sql'">
							<el-button icon="el-icon-download" circle title="导出"></el-button>
						</vJsonExcel>
					</div>
				</div>
			</div>
			<div class="rightBox">
				<template>
					<el-table :data="tableData" stripe style="width: 100%" :header-cell-style="headClass"
						:cell-style="rowClass">
						<el-table-column type="index" width="50" fixed label="序号" align="center">
						</el-table-column>
						<el-table-column v-for="(column,cIndex) in tableColumns" :prop="column.prop" :label="column.label"
							:key="column.prop" align="center" :width="column.width" v-if="column.isShow"
							:sortable="column.sortable">
							<template slot="header">
								<div>
									<div>{{column.label}}</div>
									<div>({{column.prop}})</div>
								</div>
							</template>
							<template v-slot="scope" v-if="column.format == 'recordTime'">
								<div v-if="scope.row.recordTime != null">
									{{changeTime(scope.row.recordTime)}}
								</div>
								<div v-if="scope.row.recordTime == null">
									无
								</div>
							</template>
							<template v-slot="scope" v-if="column.format == 'elapsedTime'">
								<div v-if="scope.row.elapsedTime != null">
									{{changeTime(scope.row.elapsedTime)}}
								</div>
								<div v-if="scope.row.elapsedTime == null">
									无
								</div>
							</template>
							<template v-slot="scope" v-if="column.format == 'sqlExecStart'">
								<div v-if="scope.row.sqlExecStart != null">
									{{changeTime(scope.row.sqlExecStart)}}
								</div>
								<div v-if="scope.row.sqlExecStart == null">
									无
								</div>
							</template>
							<template v-slot="scope" v-else-if="column.format == 'long'">
								<div @mouseover="showPopover(cIndex,scope.row.sqlId)" @mouseleave="hidePopover">
									<div class="two-line-ellipsis">
										{{ scope.row[column.prop] }}
									</div>
								</div>
								<el-popover placement="right" width="auto" trigger="hover"
									:content="scope.row[column.prop]" v-model="popoverVisible"
									v-if="showToopID == scope.row.sqlId && columsIndex == cIndex">
								</el-popover>
							</template>
						</el-table-column>
					</el-table>
				</template>
				<div class="fenyeBox">
					<div class="block">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:page-sizes="[10,50,200,100000]" :page-size="pageSize" :total="total"
							layout="total, sizes, prev, pager, next, jumper" background>
						</el-pagination>
					</div>
				</div>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import bus from 'common/bus.js';
	import tableColumns from './sqlLongColumns.js';
	import vJsonExcel from 'vue-json-excel';
	import {
		postJavaServerData,
		submitAdmin
	} from "@/api";
	import {
		getData
	} from '@/utils/IndexedDB';
	import {
		Log
	} from '@icon-park/vue';
	export default {
		components: {
			vJsonExcel
		},
		data() {
			return {
				columsIndex:0,
				tableData: [],
				dialogVisible: true,
				options: [],
				selectNameList: [],
				tableColumns: tableColumns,
				value: '',
				jsonData: [],
				checkedArr: [],
				selectName: '',
				chooseId: 1,
				pageSize: 10,
				nodeList: [],
				chooseFrom: {},
				systemnameOptions: [],
				popoverVisible:false,
				showToopID:'',
				systemname: '',
				chooseIP: '',
				serverList: [],
				chooseTime: [],
				allData: [],
				pageNum: 1,
				postData: {
					opera: "GetDBMonitor",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {},
				},
				total: 0,
				form: {
					name: '',
					ip: '',
					time: '',
					time2: new Date(),
					pageNum: 1,
					pageSize: 10
				},
				form2: {
					pageNum: 1,
					pageSize: 10,
				},
				getCid: '',
				expireTimeOPtion: {
					disabledDate(time) {
						return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
					}
				},
			}
		},
		created() {
			this.initCheckedArr()

		},
		mounted() {
			this.getAllName()
		},
		methods: {
			getData() {
				let newData = this.tableData.map(item => {
					return {
						会话使用用户名: item.username,
						会话状态: item.status,
						程序模块名: item.module,
						程序名: item.program,
						操作: item.action,
						后台进程ID: item.functionId,
						sqlId:item.sqlId,
						sql语句:item.sqlText,
						开始执行时间: item.sqlExecStart,
						绑定变量信息: item.bindsXml,
						已执行时间: item.elapsedTime,
						CPU消耗时间: item.cpuTime,
						IO等待消耗时间: item.userIoWaitTime,
						APP类型事件等待时间: item.applicationWaitTime,
						集群类型等待事件消耗时间: item.clusterWaitTime,
						缓存读数量: item.bufferGets,
						磁盘写数量: item.diskReads,
						IO总计读取: item.readGbytes,
						记录采集时间: item.recordTime,
						会话连接相关端口: item.port,
						主机名: item.machine,
						客户端主机IP: item.ip,
						程序类型: item.proctype,
						等待事件: item.event,
						会话返回的错误信息: item.errorMessage,
					};
				});
				this.jsonData = newData
				console.log(123, newData)
			},
			async getDataAll() {
				let parts = this.getCid.split('/');
				let a = parts[0]
				let b = parts[1]
				let res = await postJavaServerData("/Sp/oraclesqlAll?" + "ip=" + a + "&systemname=" + b + "&pageNum=" + this.pageNum + "&pageSize=" + this.pageSize)
				console.log(333, res)
				this.tableData = res.data
				this.total = res.total
				this.getData()
			},
			showPopover(index,content) {
				console.log(index)
				this.columsIndex = index
				this.showToopID = content
				this.$nextTick(() => {
					this.popoverVisible = true;
				});
			},
			hidePopover() {
				this.popoverVisible = false;
			},
			initCheckedArr() {
				this.tableColumns.forEach((element, index) => {
					if (element.isShow) {
						this.checkedArr.push(element.label);
					}
				});
			},
			//筛选列
			handleChange() {
				console.log(this.checkedArr)
				this.tableColumns.map((item, index) => {
					// 列的显示隐藏状态改变
					item.isShow = this.checkedArr.includes(item.label);
				});
			},
			// async getAllOption() {
			// 	let res = await postJavaServerData("/Sp/oraclesqlAll?" + "ip=" + this.getCid +
			// 		"&systemname=&pageNum=1&pageSize=1000000")
			// 	console.log('option', res)
			// 	let arr = res.data
			// 	arr.forEach((item, index) => {
			// 		this.systemnameOptions.push(item.username)
			// 	})
			// 	this.systemnameOptions = [...new Set(this.systemnameOptions)];
			// 	console.log(this.systemnameOptions)
			// },
			async getAllName() {
				let res = await postJavaServerData("/Sp/seledbbytime")
				console.log(888, res)
				const arr = res.map(item => ({
					value: item.ip,
					label: item.ip + '/' + item.SYSTEMNAME,
					systemname:item.SYSTEMNAME,
					cid:item.cid
				}));
				console.log('结果', arr)
				this.options = arr
				this.getCid = arr[0].label
				this.systemname = arr[0].systemname
				this.getDataAll()
			},
			changeTime(timestamp) {
				if (timestamp) {
					let date = new Date(parseInt(timestamp));
					let Year = date.getFullYear();
					let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
					let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
					let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
					let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
					let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
					return Year + '-' + Moth + '-' + Day + ' ' + Hour + ':' + Minute + ':' + Sechond;
				} else {
					return '无'
				}
			},
			choose(id) {
				this.chooseId = id
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getDataAll()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.pageNum = val
				this.getDataAll()

			},
			headClass() { //表头居中显示
				return "text-align:center"
			},
			rowClass() { //表格数据居中显示
				return "text-align:center"
			}
		},
	}
</script>

<style scoped>
	.logBox {
		width: 100%;
		height: auto;
		background-color: white;
		border-radius: 5px;
		border: 1px solid #ddd;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.two-line-ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 控制显示的行数 */
		white-space: normal;
		/* 设置为normal，使得溢出的部分显示为省略号 */
	}

	#myCheckboxGroup /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {

		color: #606266;
	}

	#myCheckboxGroup /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #5fb878;
		border-color: #5fb878;
	}

	#myCheckboxGroup /deep/ .el-checkbox {
		margin-bottom: 8px;
	}

	.toolBox {
		display: flex;
		flex: 1;
		flex-direction: row;
		justify-content: flex-end;
	}

	::v-deep .el-table__body tr,
	::v-deep .el-table__body td {
		padding: 0;
		height: 60px;
	}
	
	.el-select{
		width: 250px;
	}

	.selectBox1 {
		width: 100%;
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}


	.leftBoxTitle {
		width: 100%;
		height: 50px;
		font-size: 20px;
		border-bottom: solid 1px #ddd;
	}

	.selectBox {
		margin-left: 10px;
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.rightBox {
		width: 100%;
		height: auto;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		padding: 10px;
		margin-bottom: 10px;
	}

	.fenyeBox {
		margin: 10px auto;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
</style>
